<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同步异步</title>
</head>
<style>
    #box1 {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<body>
    <div id="box1"></div>
</body>

<script>
    // 小方块移动
    // function move(ele, arg, target, cb) {
    //     let start = parseInt(window.getComputedStyle(ele, null)[arg])
    //     let dis = (target - start) / Math.abs(target - start)
    //     let speed = dis * 5
    //     function fn() {
    //         let now = parseInt(window.getComputedStyle(ele, null)[arg])
    //         if (now === target) {
    //             // 运动完成
    //             cb && cb("运动下一个")
    //         } else {
    //             ele.style[arg] = now + speed + "px"
    //             window.requestAnimationFrame(fn)
    //         }
    //     }
    //     fn()
    // }
    // let ele = document.querySelector('#box1')
    // move(ele, "left", 200, function (res) {
    //     console.log(res)
    //     move(ele, "top", 200)
    // })   


    // 小案例
    // function loadImg() {
    //     return new Promise((resolve, reject) => {
    //         let img = new Image()
    //         img.src = "https://pic3.zhimg.com/v2-cf1c78890006e078a538842a0caa7127_1440w.jpg?source=172ae18b"
    //         img.onload = function () {
    //             resolve("图片加载成功")
    //         }
    //         img.onerror = function () {
    //             reject("图片加载失败")
    //         }
    //     })
    // }
    // loadImg().then(res => {
    //     console.log("成功")
    // }, err => {
    //     console.log("失败")
    // })


    // async
    async function myfn() {
        // await 后面一定要跟一个 Promise 对象
        await new Promise((res, rej) => {
            setTimeout(() => {
                console.log(111)
                res()
            }, 1000);
        })
        await new Promise((res, rej) => {
            setTimeout(() => {
                console.log(222)
                res()
            }, 1000);
        })
        await new Promise((res, rej) => {
            setTimeout(() => {
                console.log(333)
                res()
            }, 1000);
        })

    }
    myfn()



</script>

</html>